<template>
	<view class="com-chat">
		<!-- 顶部导航栏 -->
		<slot name="navbar"></slot>

		<!-- <view class="com-chat_tips">无网络</view> -->

		<!-- 内容列表 -->
		<com-chat-message ref="ChatMessage" :roomId="roomId" :encryptDisplay="encryptDisplay"
			:showFriendName="showFriendName"
			:height="`calc(100vh - ${navbarHeight}px - 96rpx - ${keyboardHeight||safeAreaInsetsBottom}px)`"
			@avatarClick="avatarClick" @textMessageClick="textMessageClick"></com-chat-message>

		<!-- 底部输入栏 -->
		<com-chat-input ref="ChatInput" @send="sendMessage" @keyboardheightchange="keyboardheightchange"></com-chat-input>

		<!-- 解密信息弹窗 -->
		<com-chat-decrypt ref="ChatDecrypt"></com-chat-decrypt>

		<!-- 密聊修改昵称 -->
		<com-chat-update-nickname ref="ChatUpdateNickname"></com-chat-update-nickname>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import Vue from 'vue'

	export default {
		props: {
			roomId: {
				type: String,
				default: ''
			},
			currentUser: {
				type: Object,
				default: () => {}
			},
			// 是否密聊显示
			encryptDisplay: {
				type: Boolean,
				default: false
			},
			// 是否显示朋友名称
			showFriendName: {
				type: Boolean,
				default: false
			},
			navbarHeight: {
				type: String,
				default: '0px'
			},
		},
		data() {
			return {
				safeAreaInsetsBottom: uni.getSystemInfoSync().safeAreaInsets.bottom,
				keyboardHeight: 0,
				websocketReady: false,
			}
		},
		computed: {
			...mapGetters(['openId']),
			allready() {
				return !!this.roomId && this.websocketReady
			},
		},
		watch: {
			allready: {
				handler(nVal, oVal) {
					if (nVal) {
						this.$nextTick(() => {
							let params = {
								roomId: this.roomId,
								openId: this.openId,
								type: '1'
							}
							this.$websocket.bindRoom(params)
						})
					}
				},
			},
		},
		async created() {
			if (!this.$websocket.isBind) {
				await Vue.prototype.$websocket.bind(this.openId)
			}
			setTimeout(() => {
				this.websocketReady = true
			}, 100)
		},
		beforeDestroy() {
			let params = {
				roomId: this.roomId,
				openId: this.openId,
				type: '0'
			}
			this.$websocket.bindRoom(params)
		},
		methods: {
			sendMessage({ format, content }) {
				let timestamp = Date.now()
				let params = {
					action: 0,
					content: content,
					sender: this.openId,
					receiver: this.roomId,
					format: format,
					timestamp: timestamp,
					extra: JSON.stringify({
						// headUrl: this.currentUser.head,
						// nickname: this.currentUser.name,
						tempId: timestamp,
						roomId: this.roomId,
					}),
				}
				this.$websocket.sendMessage(params)
				this.$refs.ChatMessage.pushMessage(params)
			},
			avatarClick(row) {
				if (this.encryptDisplay && row.type === 'user' && row.msg.sender === this.openId) {
					this.$refs.ChatUpdateNickname.show({
						openId: this.openId,
						roomId: this.roomId,
						// nickName: row.msg.nickname,// 修改后，聊天消息的昵称与goOnline接口中得到的不符合
					})
				}
			},
			textMessageClick(row) {
				if (this.encryptDisplay) {
					let tAESkey = this.roomId.substring(0, 16)
					const tIV = '1234567890hjlkew'
					let tContent = this.AES.decrypt(row.msg.content, tAESkey, tIV).trim()
					this.$refs.ChatDecrypt.show({
						title: row.msg.timestamp,
						content: tContent,
					})
				}
			},
			keyboardheightchange(e) {
				this.keyboardHeight = e
			},
		}
	}
</script>

<style lang="scss" scoped>
	.com-chat_tips {
		padding: 10rpx 32rpx;
		font-size: 28rpx;
		line-height: 36rpx;
	}
</style>